<template>
  <div ref="divDemo">你好</div>
  <div>{{ count }}</div>
  <div>age {{ proxyObj.age }}</div>
  <button @click="count++">count++</button>
  <button @click="proxyObj.age++">age++</button>
  <button @click="doUnmount">卸载组件</button>
</template>


<script>
export default {
  data(){
    return {
      msg:'hello vue3'
    }
  },
  beforeCreate(){
    console.log('beforeCreate....');
  },
  created(){
    console.log('created....');
  },
  beforeUpdate(){
    console.log('beforeUpdate....');
  },
  updated(){
    console.log('updated....');
  }
}
</script>

<script setup>
import { getCurrentInstance,ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
const divDemo = ref(null)
const count = ref(1)
const proxyObj = reactive({name:'lisi',age:18})
console.log("app ....");
// 获取当前组件实例
const currentInstance = getCurrentInstance()
onBeforeMount(()=>{
  console.log('onBeforeMount....');
  console.log('divDemo===>',divDemo);
})
onMounted(()=>{
  console.log('onMounted....');
  console.log('divDemo===>',divDemo);
})

onBeforeUpdate(()=>{
  console.log('onBeforeUpdate....');
})

onUpdated(()=>{
  console.log('onUpdated....');
})

onBeforeUnmount(()=>{
  console.log('onBeforeUnmount.....');
})

onUnmounted(()=>{
  console.log('onUnmounted......');
})

const doUnmount = ()=>{
  console.log('currentInstance==>',currentInstance.appContext.app);
  currentInstance.appContext.app.unmount()
}
</script>
